<template>
	<view class="container">
		<view class="container-c">
			<form @submit="formSubmit">
				<view class="addressinfo">
					<text class="left">收件人</text>
					<input v-model="name" value="item.name" class="right" type="text" placeholder="请输入收件人姓名"
						name="name" />
				</view>
				<view class="addressinfo">
					<text class="left">电话号码</text>
					<input v-model="phoneNumber" class="right" value="item.phoneNumber" type="text"
						placeholder="请输入收件人电话号码" name="phoneNumber" />
				</view>
				<view class="addressinfo">
					<text class="left">所在地区</text>
					<text v-if="showAddress==false" class="right" @tap="openAddress">请点击选择地址</text>
					<text v-else>{{addressInfo.label}}</text>
				</view>
				<view class="addressinfo">
					<text class="left">详细地址</text>
					<input class="right" v-model="detailAddress" value="item.detailAddress" type="text"
						placeholder="输入详细地址" name="detailAddress" />
				</view>
				<view class="addressinfo switch">
					<text class="left">设为默认地址</text>
					<switch checked @change="switch1Change" color="rgb(53, 78, 68)" />
				</view>
				<view class="del" @tap="delAddress">
					删除收货地址
				</view>
				<button class="save" type="default" formType="submit">保存地址</button>
			</form>
		</view>

		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {
		updateAddressInfo,
		findAllAddress,
		delAddressInfo
	} from "@/api/list/address/index.js"
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				peopleInfo: {},
				addressInfo: {},
				name: "",
				phoneNumber: "",
				detailAddress: "",
				// 需要修改的地址
				item: {},
				showAddress: false
			};
		},
		components: {
			simpleAddress
		},
		onLoad(e) {
			findAllAddress().then(res => {
				// console.log(res)
				var list = res.data.items;
				this.item = list.find(ele => ele.id == e.id);
				console.log(this.item)
			})
		},
		methods: {
			openAddress() {
				this.$refs.simpleAddress.open()
			},
			formSubmit(e) {
				// console.log(e)
				var obj = {
					"city": this.addressInfo.labelArr[1],
					"cityCode": this.addressInfo.cityCode,
					"createTime": this.item.createTime,
					"defaultStatus": 0,
					"detailAddress": this.detailAddress,
					"id": this.item.id,
					"memberId": this.item.memberId,
					"modifyTime": this.item.modifyTime,
					"name": this.name,
					"phoneNumber": this.phoneNumber,
					"postCode": this.item.postCode,
					"province": this.addressInfo.labelArr[0],
					"region": this.addressInfo.labelArr[2],
					"tag": ""
				}
				updateAddressInfo(obj).then(res => {
					// console.log(res)
				})
			},
			onConfirm(e) {
				// console.log(e)
				this.addressInfo = e;
				this.showAddress = true
			},
			// 删除地址
			delAddress() {
				var _this=this;
				uni.showModal({
					title: "删除提示",
					content: "你将删除这个收货地址",
					success(e) {
						if (e.confirm) {
							delAddressInfo(_this.item.id).then(res=>{
								console.log(res)
								if(res.success){
									uni.showToast({
										title:"删除成功"
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
	}

	.container-c {
		width: 650rpx;
		margin: 0 auto;
	}

	.addressinfo {
		display: flex;
		align-items: center;
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 2rpx solid #ccc;
		font-size: 30rpx;
		color: #000;

		.left {
			width: 35%;
		}

		.right {
			width: 65%;
		}
	}

	.addressinfo.switch {
		display: flex;
		justify-content: space-between;
	}

	.save {
		width: 70%;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: #354e44;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		margin: 300rpx auto;
	}

	.del {
		width: 100%;
		height: 100rpx;
		background-color: #e64340;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		border-bottom: solid 1rpx #eee;
		margin-top: 60rpx;
	}
</style>
